@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;400;500;600;700&display=swap') layer(base);

@import 'tailwindcss';

@import 'tw-animate-css';

/*
  ---break---
*/

@custom-variant dark (&:where(.dark, .dark *));

@plugin '@tailwindcss/forms';

@theme {
    --font-*: initial;
    --font-sans: Inter, sans-serif;
    --font-mono: 'Source Code Pro', sans-serif;
    --font-code: 'Roboto Mono', 'Source Code Pro', system-ui, sans-serif;

    --color-bg-black: #0e1014;
    --color-pure-black: #05050a;
    --color-active-gray: #161720;
    --color-hover-gray: #1d1f28;
    --color-text-light-gray: #a9a9a9;
    --color-off-black: #05050a;
    --color-bg-cta-green: #75e270;
    --color-text-cta-green1: #224421;
    --color-border-gray: #333333;
    --color-border-blue: #1489df;
    --color-text-blue: #1489df;
    --color-text-light-blue: #76c5ff;
    --color-bg-dark-blue: #182633;
    --color-row-hover: #0d0d14;
    --color-white: #ffffff;
    --color-orange-light: #ffd19a;
    --color-orange-base: #ec9455;
    --color-orange-base-35: #f5ae7359;
    --color-orange-dark: #f76b15;
    --color-green-light: #edfbd8;
    --color-green-base-35: #84d65a59;
    --color-green-base: #84d65a;
    --color-green-dark: #2b641e;
    --color-blue-light: #d7f1fd;
    --color-blue-base: #509af8;
    --color-blue-base-35: #509af859;
    --color-blue-dark: #0c2a75;
    --color-red-light: #fce8db;
    --color-red-base: #ef665b;
    --color-red-base-35: #ef665b59;
    --color-red-dark: #71192f;
    --color-yellow-light: #fef7d1;
    --color-yellow-base: #f7c752;
    --color-yellow-base-35: #f7c75259;
    --color-yellow-dark: #755118;
    --color-alert-red: #ef665b;
    --color-dark-0: #ffffff;
    --color-dark-100: #f4f4f5;
    --color-dark-200: #e4e4e7;
    --color-dark-300: #d4d4d8;
    --color-dark-400: #a1a1aa;
    --color-dark-500: #71717a;
    --color-dark-600: #27272a;
    --color-dark-700: #18181b;
    --color-dark-800: #09090b;
    --color-border-gray-400: #323439;
    --color-text-light: #a9acb3;
    --color-ring: #a9acb3;
    --color-grayscale-100: #fafafa;
    --color-grayscale-200: #ececec;
    --color-grayscale-300: #d0d1d0;
    --color-grayscale-400: #a2a2a2;
    --color-grayscale-500: #737473;
    --color-grayscale-600: #454545;
    --color-grayscale-700: #333333;
    --color-grayscale-800: #262626;
    --color-grayscale-900: #111111;
    --color-grayscale-1000: #09090b;
    --color-success-100: #f9fef1;
    --color-success-200: #edfbd8;
    --color-success-300: #d4f1c5;
    --color-success-400: #84d65a;
    --color-success-500: #2b641e;
    --color-warning-100: #fffcf0;
    --color-warning-200: #fef7d1;
    --color-warning-300: #fcebc2;
    --color-warning-400: #f7c752;
    --color-warning-500: #e6a70d;
    --color-alert-100: #fef6f1;
    --color-alert-200: #fce8db;
    --color-alert-300: #f9c9c6;
    --color-alert-400: #ef665b;
    --color-alert-500: #71192f;
    --color-info-100: #f0fafe;
    --color-info-200: #d7f1fd;
    --color-info-300: #c2dcfd;
    --color-info-400: #509af8;
    --color-info-500: #0c2a75;
    --color-black: #000000;
    --color-primary-1: #012a29;
    --color-primary-2: #024b49;
    --color-primary-3: #036a67;
    --color-primary-4: #05928f;
    --color-primary-5: #06b6b3;
    --color-primary-6: #2cd4d1;
    --color-primary-7: #5ce2df;
    --color-primary-8: #91f0ed;
    --color-primary-9: #b6faf8;
    --color-primary-10: #e5fefd;
    --color-grayscale-1: #0b0b0c;
    --color-grayscale-2: #121212;
    --color-grayscale-3: #18191b;
    --color-grayscale-4: #202124;
    --color-grayscale-5: #2a2b2f;
    --color-grayscale-6: #35363a;
    --color-grayscale-7: #424347;
    --color-grayscale-8: #505155;
    --color-grayscale-9: #626366;
    --color-grayscale-10: #76777a;
    --color-grayscale-11: #8b8c8f;
    --color-grayscale-12: #a1a2a5;
    --color-grayscale-13: #c4c5c7;
    --color-grayscale-14: #e7e7e7;
    --color-info-1: #f0fafe;
    --color-info-2: #d7f1fd;
    --color-info-3: #c2dcfd;
    --color-info-4: #509af8;
    --color-info-5: #0c2a75;
    --color-alert-1: #fef6f1;
    --color-alert-2: #fce8db;
    --color-alert-3: #f3d1cd;
    --color-alert-4: #ef665b;
    --color-alert-5: #dc564c;
    --color-alert-6: #c8453d;
    --color-alert-7: #71192f;
    --color-warning-1: #fffcf0;
    --color-warning-2: #fef7d1;
    --color-warning-3: #fcebc2;
    --color-warning-4: #f7c752;
    --color-warning-5: #e6a70d;
    --color-success-1: #f9fef1;
    --color-success-2: #edfbd8;
    --color-success-3: #d4f1c5;
    --color-success-4: #84d65a;
    --color-success-5: #2b641e;
    --color-border-1: #050506;
    --color-border-2: #0b0d0e;
    --color-border-3: #151719;
    --color-border-4: #202427;
    --color-border-5: #2e3338;
    --color-border-6: #3e454c;
    --color-border-7: #505962;
    --color-border-8: #65707b;
    --color-border-9: #7e8a95;
    --color-border-10: #a0a8b1;
    --color-border-11: #c7ccd1;
    --color-border-12: #e3e5e8;
    --color-text-1: #050506;
    --color-text-2: #0b0d0e;
    --color-text-3: #151719;
    --color-text-4: #202427;
    --color-text-5: #2e3338;
    --color-text-6: #3e454c;
    --color-text-7: #505962;
    --color-text-8: #65707b;
    --color-text-9: #7e8a95;
    --color-text-10: #a0a8b1;
    --color-text-11: #c7ccd1;
    --color-text-12: #e3e5e8;
    --color-text-primary: #f5f5f5;
    --color-text-secondary: #cccccc;
    --color-text-tertiary: #999999;
    --color-data-success: #5bb98b;
    --color-data-failure: #e5484d;
    --color-code-mint: #6ed6ac;
    --color-code-blue: #90a1f0;
    --color-code-violet: #c695c6;
    --color-code-gray: #c7ccd1;
    --color-code-orange: #f09745;
    --color-code-yellow: #f7c752;

    --text-xs: 10px;
    --text-xs--line-height: 12px;
    --text-s: 12px;
    --text-s--line-height: 18px;
    --text-sm: 14px;
    --text-sm--line-height: 20px;
    --text-base: 14px;
    --text-base--line-height: 20px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 28px;
    --text-4xl: 32px;
    --text-5xl: 36px;

    --width-largebox: 1200px;
    --width-largecell: 480px;

    --shadow-card: 0px 2px 50px 5px rgba(51, 51, 51, 0.3), 0px 8px 10px 0px rgba(0, 0, 0, 0.3);

    --background-image-dark-glow: linear-gradient(141deg, var(--color-grayscale-5) 0%, var(--color-black) 100%);
    --background-image-dark-glow-reverse: linear-gradient(135deg, var(--color-grayscale-3) 0%, var(--color-grayscale-5) 94.23%);

    --animate-accordion-down: accordion-down 0.2s ease-out;
    --animate-accordion-up: accordion-up 0.2s ease-out;

    @keyframes accordion-down {
        from {
            height: 0;
        }
        to {
            height: var(--radix-accordion-content-height);
        }
    }
    @keyframes accordion-up {
        from {
            height: var(--radix-accordion-content-height);
        }
        to {
            height: 0;
        }
    }

    /* Start of design system v2 */
    --default-transition-duration: 100ms;

    /* Primitive colors */
    --color-black: #0b0b0c;
    --color-white: #ffffff;

    --color-gray-1000: #0b0b0c;
    --color-gray-950: #121212;
    --color-gray-900: #18191b;
    --color-gray-875: #1e1f21;
    --color-gray-850: #202124;
    --color-gray-825: #242528;
    --color-gray-800: #2a2b2f;
    --color-gray-750: #35363a;
    --color-gray-700: #424347;
    --color-gray-650: #505155;
    --color-gray-600: #626366;
    --color-gray-550: #76777a;
    --color-gray-500: #8b8c8f;
    --color-gray-400: #a1a2a5;
    --color-gray-300: #c4c5c7;
    --color-gray-250: #d6d7d8;
    --color-gray-200: #e7e7e7;
    --color-gray-150: #f0f0f0;
    --color-gray-100: #f2f2f2;
    --color-gray-75: #fafafa;
    --color-gray-50: #ffffff;

    --color-brand-100: #e0f7fc;
    --color-brand-300: #66d6f0;
    --color-brand-500: #00b2e3;
    --color-brand-700: #0089b0;
    --color-brand-900: #02485d;
    --color-brand-1000: #002631;

    --color-orange-100: #ffe5d1;
    --color-orange-300: #fbb47a;
    --color-orange-500: #f09745;
    --color-orange-700: #bd7736;
    --color-orange-900: #6a3c1c;

    --color-yellow-100: #fff8d1;
    --color-yellow-300: #fed75b;
    --color-yellow-500: #f7c752;
    --color-yellow-700: #d6a81e;
    --color-yellow-900: #5c4a0b;

    --color-blue-100: #e6f0ff;
    --color-blue-300: #afcbff;
    --color-blue-500: #90a1f0;
    --color-blue-700: #3e58a8;
    --color-blue-900: #1f2a55;

    --color-violet-100: #f2e6f7;
    --color-violet-300: #d8b6e6;
    --color-violet-500: #c695c6;
    --color-violet-700: #ad82ad;
    --color-violet-900: #5d3a63;

    --color-mint-100: #e3f9f2;
    --color-mint-300: #9ce7ce;
    --color-mint-500: #6ed6ac;
    --color-mint-700: #4aa981;
    --color-mint-900: #1f4e39;

    --color-pink-100: #fde6f2;
    --color-pink-300: #f7a3cd;
    --color-pink-500: #ef6cbd;
    --color-pink-700: #c04e91;
    --color-pink-900: #6a2851;

    --color-red-100: #fdecec;
    --color-red-300: #f7a6a6;
    --color-red-500: #ee4242;
    --color-red-700: #e81818;
    --color-red-900: #5a0f0f;

    --color-green-100: #e6f7ec;
    --color-green-300: #a8e6b9;
    --color-green-500: #4cd964;
    --color-green-700: #1e9e3e;
    --color-green-900: #0a3d16;

    --color-file: #f4f2eb;

    /* Functional */
    --color-bg-surface: var(--color-gray-50);
    --color-bg-elevated: var(--color-gray-75);
    --color-bg-muted: var(--color-gray-300);
    --color-bg-subtle: var(--color-gray-150);
    --color-bg-accent: var(--color-brand-100);
    --color-bg-success: var(--color-mint-100);

    /* Nav */
    --color-nav-bg-hover: var(--color-gray-50);
    --color-nav-bg-press: var(--color-gray-200);

    /* Text */
    --color-text-primary: var(--color-gray-900);
    --color-text-secondary: var(--color-gray-750);
    --color-text-tertiary: var(--color-gray-600);
    --color-text-disabled: var(--color-gray-500);
    --color-text-brand: var(--color-brand-500);

    /* Border */
    --color-border-default: var(--color-gray-300);
    --color-border-muted: var(--color-gray-200);
    --color-border-strong: var(--color-gray-300);
    --color-border-disabled: var(--color-gray-150);
    --color-border-brand: var(--color-brand-500);

    /* Icon */
    --color-icon-primary: var(--color-gray-900);
    --color-icon-secondary: var(--color-gray-750);
    --color-icon-tertiary: var(--color-gray-600);
    --color-icon-disabled: var(--color-gray-500);
    --color-icon-brand: var(--color-brand-500);

    /* Badge */
    --color-badge-bg-gray: var(--color-gray-300);
    --color-badge-fg-gray: var(--color-gray-750);
    --color-badge-bg-mint: var(--color-mint-100);
    --color-badge-fg-mint: var(--color-mint-700);
    --color-badge-bg-pink: var(--color-pink-100);
    --color-badge-fg-pink: var(--color-pink-700);
    --color-badge-bg-yellow: var(--color-yellow-100);
    --color-badge-fg-yellow: var(--color-yellow-700);

    --color-focus-ring: var(--color-brand-500);
    --shadow-focus: 0 0 0 3px rgba(0, 178, 227, 0.2);

    /* Feedback */
    --color-feedback-success-fg: var(--color-green-700);
    --color-feedback-success-bg: var(--color-green-100);
    --color-feedback-success-alt: var(--color-green-100);
    --color-feedback-warning-fg: var(--color-yellow-700);
    --color-feedback-warning-bg: var(--color-yellow-500);
    --color-feedback-warning-alt: var(--color-yellow-500);
    --color-feedback-info-fg: var(--color-brand-700);
    --color-feedback-info-bg: var(--color-brand-100);
    --color-feedback-info-alt: var(--color-brand-100);
    --color-feedback-error-fg: var(--color-red-700);
    --color-feedback-error-bg: var(--color-red-100);
    --color-feedback-error-alt: var(--color-red-100);
    --color-feedback-error-border: var(--color-red-300);

    /* Dropdown */
    --color-dropdown-bg-default: var(--color-gray-75);
    --color-dropdown-bg-hover: var(--color-gray-150);
    --color-dropdown-bg-press: var(--color-gray-50);

    /* Button */
    --color-btn-primary-bg: var(--color-brand-500);
    --color-btn-primary-fg: var(--color-gray-50);
    --color-btn-primary-hover: var(--color-brand-700);
    --color-btn-primary-press: var(--color-brand-900);

    --color-btn-secondary-bg: var(--color-gray-200);
    --color-btn-secondary-fg: var(--color-gray-600);
    --color-btn-secondary-hover: var(--color-gray-50);
    --color-btn-secondary-press: var(--color-gray-400);

    --color-btn-tertiary-bg: var(--color-gray-50);
    --color-btn-tertiary-fg: var(--color-gray-750);
    --color-btn-tertiary-hover: var(--color-gray-100);
    --color-btn-tertiary-press: var(--color-gray-200);

    --color-btn-destructive-bg: var(--color-red-500);
    --color-btn-destructive-fg: var(--color-gray-50);
    --color-btn-destructive-hover: var(--color-red-700);
    --color-btn-destructive-press: var(--color-red-900);

    /* Link */
    --color-link-default: var(--color-gray-1000);
    --color-link-hover: var(--color-brand-500);
    --color-link-press: var(--color-brand-700);
    --color-link-disabled: var(--color-gray-700);
}

@layer theme {
    :root,
    :host {
        @variant dark {
            /* Functional */
            --color-bg-surface: var(--color-gray-1000);
            --color-bg-elevated: var(--color-gray-900);
            --color-bg-muted: var(--color-gray-700);
            --color-bg-subtle: var(--color-gray-825);
            --color-bg-accent: var(--color-brand-1000);
            --color-bg-success: var(--color-mint-900);

            /* Nav */
            --color-nav-bg-hover: var(--color-gray-850);
            --color-nav-bg-press: var(--color-gray-700);

            /* Text */
            --color-text-primary: var(--color-gray-50);
            --color-text-secondary: var(--color-gray-300);
            --color-text-tertiary: var(--color-gray-500);
            --color-text-disabled: var(--color-gray-600);
            --color-text-brand: var(--color-brand-500);

            /* Border */
            --color-border-default: var(--color-gray-700);
            --color-border-muted: var(--color-gray-800);
            --color-border-strong: var(--color-gray-500);
            --color-border-disabled: var(--color-gray-900);
            --color-border-brand: var(--color-brand-500);

            /* Icon */
            --color-icon-primary: var(--color-gray-50);
            --color-icon-secondary: var(--color-gray-300);
            --color-icon-tertiary: var(--color-gray-500);
            --color-icon-disabled: var(--color-gray-600);
            --color-icon-brand: var(--color-brand-500);

            /* Badge */
            --color-badge-bg-gray: var(--color-gray-700);
            --color-badge-fg-gray: var(--color-gray-300);
            --color-badge-bg-mint: var(--color-mint-900);
            --color-badge-fg-mint: var(--color-mint-500);
            --color-badge-bg-pink: var(--color-pink-900);
            --color-badge-fg-pink: var(--color-pink-500);
            --color-badge-bg-yellow: var(--color-yellow-900);
            --color-badge-fg-yellow: var(--color-yellow-300);

            --color-focus-ring: var(--color-brand-500);

            /* Feedback */
            --color-feedback-success-fg: var(--color-green-500);
            --color-feedback-success-bg: var(--color-green-900);
            --color-feedback-success-alt: var(--color-green-700);
            --color-feedback-warning-fg: var(--color-yellow-300);
            --color-feedback-warning-bg: var(--color-yellow-900);
            --color-feedback-warning-alt: var(--color-yellow-700);
            --color-feedback-info-fg: var(--color-brand-500);
            --color-feedback-info-bg: var(--color-brand-1000);
            --color-feedback-info-alt: var(--color-brand-700);
            --color-feedback-error-fg: var(--color-red-500);
            --color-feedback-error-bg: var(--color-red-900);
            --color-feedback-error-alt: var(--color-red-700);
            --color-feedback-error-border: var(--color-red-500);

            /* Dropdown */
            --color-dropdown-bg-default: var(--color-gray-825);
            --color-dropdown-bg-hover: var(--color-gray-850);
            --color-dropdown-bg-press: var(--color-gray-1000);

            /* Button */
            --color-btn-primary-bg: var(--color-brand-500);
            --color-btn-primary-fg: var(--color-gray-50);
            --color-btn-primary-hover: var(--color-brand-700);
            --color-btn-primary-press: var(--color-brand-900);

            --color-btn-secondary-bg: var(--color-gray-800);
            --color-btn-secondary-fg: var(--color-gray-150);
            --color-btn-secondary-hover: var(--color-gray-650);
            --color-btn-secondary-press: var(--color-gray-500);

            --color-btn-tertiary-bg: var(--color-gray-850);
            --color-btn-tertiary-fg: var(--color-gray-200);
            --color-btn-tertiary-hover: var(--color-gray-800);
            --color-btn-tertiary-press: var(--color-gray-700);

            --color-btn-destructive-bg: var(--color-red-500);
            --color-btn-destructive-fg: var(--color-gray-50);
            --color-btn-destructive-hover: var(--color-red-700);
            --color-btn-destructive-press: var(--color-red-900);

            /* Link */
            --color-link-default: var(--color-gray-50);
            --color-link-hover: var(--color-brand-300);
            --color-link-press: var(--color-brand-500);
            --color-link-disabled: var(--color-gray-500);
        }
    }
}

@utility bg-nav-gradient {
    background: linear-gradient(141deg, var(--color-bg-elevated) 0%, var(--color-bg-surface) 100%);
}

@utility focus-default {
    @variant focus-visible {
        outline: 1px solid var(--color-focus-ring);
        outline-offset: 0;
        box-shadow: 0 0 0 3px rgba(0, 178, 227, 0.2);
    }
}

@utility focus-error {
    @variant focus {
        box-shadow: 0 0 0 3px rgba(238, 66, 66, 0.2);
    }
}

@utility focus-shadow {
    @variant focus {
        box-shadow: 0 0 0 3px rgba(0, 178, 227, 0.2);
    }
}

@utility text-title-screen {
    font-size: 40px;
    line-height: 48px;
    font-weight: 700;
}

@utility text-title-section {
    font-size: 32px;
    line-height: 40px;
    font-weight: 700;
}

@utility text-title-subsection {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
}

@utility text-title-group {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
}

@utility text-title-body {
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
}

@utility text-body-large-regular {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}

@utility text-body-large-semi {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}

@utility text-body-medium-regular {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}

@utility text-body-medium-medium {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

@utility text-body-medium-semi {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

@utility text-body-small-regular {
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
}

@utility text-body-small-medium {
    font-size: 12px;
    line-height: 20px;
    font-weight: 500;
}

@utility text-body-small-semi {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
}

@utility text-body-extra-small-semi {
    font-size: 10px;
    line-height: 14px;
    font-weight: 600;
}

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentcolor);
    }
}

@layer base {
    html,
    body,
    #root {
        width: 100%;
        height: 100%;
    }
}

.transparent-code .language-json {
    background-color: transparent !important;
}

.transparent-code .language-typescript {
    background-color: transparent !important;
}

.break-all-words .token.string {
    word-break: break-all;
    white-space: 'normal';
}

.mantine-Prism-code {
    font-family: 'Roboto Mono';
    background-color: var(--color-bg-surface) !important;
}
